﻿@page "/chat"
@using GotraysApp.Helper;

@layout EmptyLayout
@inject ApiClientHelper ApiClientHelper
@inject NavigationManager NavigationManager
@inject IFreeSql FreeSql
@inject StorageService StorageService
@inject GotraysModule GotraysModule

<MCard Class="slide-in-left" MaxWidth="@("100%")" Width="@("100%")" Height="@("100%")">
    <MToolbar Color="cyan"
              Height="@("55px")"
              Dark>
        <MButton Icon OnClick="OnReturn">
             <MIcon>
                 mdi-arrow-left
             </MIcon>
         </MButton>
         <MToolbarTitle>
             @if (chatType == Enums.ChatType.ChatGPT3_5)
            {
                @("普通智能AI")
            }
            else if (chatType == Enums.ChatType.ChatGPT3_5_16K)
            {
                @("高级智能AI")
            }
            else
            {
                @("智能图形AI")
            }
        </MToolbarTitle>

        <MSpacer></MSpacer>

        <MMenu OffsetY>
            <ActivatorContent>
                <MButton Icon @attributes="@context.Attrs">
                     <MIcon>mdi-dots-vertical</MIcon>
                 </MButton>
             </ActivatorContent>

             <ChildContent>
                 <MList>
                     <MListItem OnClick="ClearRecord">
                         <MListItemContent>
                             <MListItemTitle>
                                 清空记录
                             </MListItemTitle>
                         </MListItemContent>
                     </MListItem>
                 </MList>
             </ChildContent>
         </MMenu>

     </MToolbar>

     @if (ChatMessages.Count > 0)
    {
        <MList ThreeLine Height="@("calc(100vh - 55px)")" MaxHeight="@("calc(100vh - 55px)")">
             <MVirtualScroll Id="scrool" Height=@("100%") OverscanCount=10 Items="ChatMessages">
                 <ItemContent>
                     <MListItem>
                         <MListItemAvatar>
                             <MImage Src="@context.Avatar"></MImage>
                         </MListItemAvatar>

                         <MListItemContent>
                             <MListItemTitle>
                                 <span style="color:blue;">
                                     @(context.Chat ? "智能AI助手" : "我")
                                </span>
                            </MListItemTitle>
                            @if (context.Chat && context.Type == Enums.ChatType.SD)
                            {

                                @if (context.Message.Contains("data:image/jpeg"))
                                {
                                    <MImage Src="@context.Message"></MImage>
                                }
                                else
                                {
                                    @context.Message
                                }
                            }
                            else
                            {
                                <MMarkdownIt Source="@context.Message" Class="markdown-parser__basic" />
                            }
                        </MListItemContent>
                    </MListItem>
                    <MDivider></MDivider>
                </ItemContent>
            </MVirtualScroll>
        </MList>
    }
    else
    {
        <div style="text-align:center;margin:20px;">
            <h2>欢迎使用Token AI🤖</h2>
            <p>Token AI是一款基于GPT3的智能AI助手，可以帮助你完成很多工作，比如：</p>
            <ul>
                <li>智能聊天</li>
                <li>智能写作</li>
                <li>智能翻译</li>
                <li>智能绘图</li>
                <li>智能代码生成</li>
            </ul>
            <p>感谢一下赞助商</p>
            <span style="color:aqua;font-size:20px;">
                <a href="https://www.masastack.com/">Masa Stack</a>
            </span>
            <span style="color:aqua;font-size:20px;">
                <a href="https://dotnet9.com/">Dotnet9</a>
            </span>

            <span style="color:aqua;font-size:20px;">
                <a href="https://wosperry.com/">wosperry</a>
            </span>
        </div>

    }
</MCard>
<SendMessage OnClick="OnClick" @bind-Value=Value />